<template>
  <view class="demo-container">
    <!-- 基础用法 -->
    <view class="demo-block">
      <view class="demo-block__title">基础用法</view>
      <view class="demo-block__content">
        <fu-checkbox v-model="checked1">复选框</fu-checkbox>
        <view class="demo-block__value">当前状态：{{ checked1 }}</view>
      </view>
    </view>
    
    <!-- 复选框组 -->
    <view class="demo-block">
      <view class="demo-block__title">复选框组</view>
      <view class="demo-block__content">
        <fu-checkbox-group v-model="checkedList1">
          <fu-checkbox :label="1">选项1</fu-checkbox>
          <fu-checkbox :label="2">选项2</fu-checkbox>
          <fu-checkbox :label="3">选项3</fu-checkbox>
        </fu-checkbox-group>
        <view class="demo-block__value">当前选中：{{ checkedList1 }}</view>
      </view>
    </view>
    
    <!-- 禁用状态 -->
    <view class="demo-block">
      <view class="demo-block__title">禁用状态</view>
      <view class="demo-block__content">
        <fu-checkbox v-model="checked2" disabled>禁用</fu-checkbox>
        <fu-checkbox v-model="checked3" disabled>禁用选中</fu-checkbox>
      </view>
    </view>
    
    <!-- 不同尺寸 -->
    <view class="demo-block">
      <view class="demo-block__title">不同尺寸</view>
      <view class="demo-block__content">
        <fu-checkbox-group v-model="checkedList2">
          <fu-checkbox :label="1" size="large">大号选项</fu-checkbox>
          <fu-checkbox :label="2">普通选项</fu-checkbox>
          <fu-checkbox :label="3" size="small">小号选项</fu-checkbox>
          <fu-checkbox :label="4" size="mini">迷你选项</fu-checkbox>
        </fu-checkbox-group>
      </view>
    </view>
    
    <!-- 限制数量 -->
    <view class="demo-block">
      <view class="demo-block__title">限制数量</view>
      <view class="demo-block__content">
        <fu-checkbox-group v-model="checkedList3" :min="1" :max="2">
          <fu-checkbox :label="1">选项1</fu-checkbox>
          <fu-checkbox :label="2">选项2</fu-checkbox>
          <fu-checkbox :label="3">选项3</fu-checkbox>
        </fu-checkbox-group>
        <view class="demo-block__value">当前选中：{{ checkedList3 }}（限制选择1-2项）</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      checked1: false,
      checked2: false,
      checked3: true,
      checkedList1: [1],
      checkedList2: [1],
      checkedList3: [1]
    }
  }
}
</script>

<style lang="scss" scoped>
.demo-container {
  padding: 20rpx;
}

.demo-block {
  margin-bottom: 30rpx;
  
  &__title {
    margin-bottom: 20rpx;
    font-size: var(--fu-font-size-lg);
    color: var(--fu-text-color);
  }
  
  &__content {
    .fu-checkbox-group {
      display: flex;
      flex-wrap: wrap;
      gap: 20rpx;
    }
  }
  
  &__value {
    margin-top: 20rpx;
    font-size: var(--fu-font-size-sm);
    color: var(--fu-text-color-secondary);
  }
}
</style> 